<template>
  <div class="App">
    <h3>我是根组件</h3>
    <!-- 动态的属性传递数据 -->
    <Shop :shop="list" :addNum="addNum" :minusNum="minusNum" />
  </div>
</template>
<script>
//练习props:父子组件通信【父亲给孩子数据】
import Shop from "./components/Shop";
export default {
  name: "",
  components: {
    Shop,
  },
  data() {
    //父亲需要设计数据-->子组件
    return {
      //父组件提供的数据分情况
      //本地存储有数据，从本地存储数据读取，如果本地存储没有数据用判断数组
      list:JSON.parse(localStorage.getItem('SHOP'))||[
        { id: 1, name: "衣服", price: 19.9, num: 0 },
        { id: 2, name: "裤子", price: 199, num: 0 },
        { id: 3, name: "AK47", price: 12345, num: 0 },
        { id: 4, name: "导弹", price: 987654, num: 0 },
        { id: 5, name: "帽子", price: 10, num: 0 },
        { id: 6, name: "坦克", price: 5, num: 0 },
      ]
    };
  },
  methods: {
    //数量加上1
    addNum(index) {
      //修改数组里面的对象的属性的属性值
      this.list[index].num++;
    },
    minusNum(index) {
      this.list[index].num > 0 ? this.list[index].num-- : 0;
    },
  },
  watch: {
    //监听属性
    list: {
      //深度监听：如果数据很复杂，数据变化，但是监听不到---深度监听！
      deep: true,
      handler() {
        //本地持久化存储
        localStorage.setItem("SHOP", JSON.stringify(this.list));
      },
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
.App {
  width: 100%;
  height: 100%;
  background: #eee;
}
</style>
